<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="350"
    @cell-mouse-enter="mouseenter"
    @cell-mouse-leave="mouseleave"
    >
    <el-table-column type="expand">
    <!-- 折叠内容 -->p
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="代表性藏品" style="display: flex;align-items: center">
            <div class="represent">
              <img v-if="props.row.imgPath!=''" width="100px" height="100px" :src="require(`assets/img/tableImg/${props.row.imgPath}`)"  alt="上海鲜花港 - 郁金香" />
              <span style="margin-left:10px;">({{ props.row.represent_collection }})</span>
            </div>
          </el-form-item>
          <el-form-item label="中文名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="博物馆简介">
            <p style="line-height:25px;margin-top:5px">{{ props.row.describe }}</p>
          </el-form-item>
          <el-form-item label="游玩时长">
            <span>{{ props.row.duration_detail}}</span>
          </el-form-item>
          <el-form-item label="展示面积">
            <span>{{ props.row.area_detail}}</span>
          </el-form-item>
          <el-form-item label="藏品数量">
            <span>{{ props.row.quantity_detail}}</span>
          </el-form-item>
        </el-form>
      </template>
    <!-- 折叠内容 结束-->
    </el-table-column>
    <el-table-column
      label="博物馆名"
      prop="name"
      width="200"
      >
    </el-table-column>
    <el-table-column
      label="博物馆类别"
      prop="type"
      width="120"
      >
    </el-table-column>
    <el-table-column
      label="藏品类别"
      prop="collection"
      width="120"
      >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
   name: 'Table',
   props: {
       tableData: {
           type: Array,
       },
   },
   components: {
   },
   methods: {
       mouseenter(row) {
           this.$emit("tableMouseEnter",{'name':row.name,'class':row.class})
       },
       mouseleave() {
           this.$emit("tableMouseLeave")
       }
   },
   data () {
       return {
       }
   }
}
</script>
 
<style>
  .represent{
    display: flex;
    align-items: center;
 }
  .el-form-item {
    width: 100%;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    /* width: 50%; */
  }
  
  
</style>